<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看与编辑个人资料</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.css"
          rel="stylesheet" type="text/css">
    <style>
        .dropdown{
            margin-bottom: -20px;
        }
        .dropdown:hover{
            margin: 0px;
        }
        .show{
            /*display: block;*/
            overflow: hidden;
            visibility: hidden;
            max-height: 0px;
            transform: scaleY(0);
        }
        .dropdown:hover .show {
            visibility: visible;
            transition: transform 0.2s;
            max-height: 999999px;
            transform: scaleY(1);
        }
        .userPortrait {
            width: 40px;
            height: 40px;
            border: 1px solid red;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            /*margin-top: 100px;*/
        }
        .userPortrait img {
            display: block;
            width: 100%;
            height:100%;
            border: 1px solid green;
        }
        .thing{
            width: 100%;
            height:640px;
        }
        .welcome{
            width: 100%;
            height: 160px;
            float: left;
        }
        .homework{
            width: 100%;
            height: 320px;
            float: left;
            background-color: white;
        }
        .col{
            padding-top: 50px;
        }
        .col-15{
            padding-top: 30px;
        }
    </style>
</head>
<body>
<!--眉头-->
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
    <a class="navbar-brand col-1 text-center" href="index.html">爱思教育</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="userInformation.html">查询和修改个人信息</a>
            </li>
        </ul>
    </div>
    <div class="userPortrait">
        <a href="userInformation.html"><img src="img/defaultPortrait.jpg" alt=""></a>
    </div>
</nav>

<!--中间-->
<div class="row">
    <ul class="navbar-nav bg-light text-center col-md-2">
        <font size="15" style="font-variant-ligatures: normal">基本信息</font>
    </ul>

    <div class="main col-10">
        <div class="main col-10 welcome">
            <form id="form">
            <div class="userPortrait " >
                <img src="img/defaultPortrait.jpg" >
            </div>

            <div class="col">
                <table class="col">
                    <tr>
                        <td>姓名：</td>
                        <td>
                            <input type="text" class="" name="userName" placeholder="姓名">
                        </td>
                        <td>性别：</td>
                        <td>
                            <input type="radio" name="userSex" value="1">男
                            <input type="radio" name="userSex" value="2">女
                        </td>

                    </tr>

                    <tr>
                        <td>籍贯：</td>
                        <td>
                            <input type="text" class="" name="userNative" placeholder="XX省XX市">
                        </td>
                        <td>民族：</td>
                        <td>
                            <select name="userNation" class=col-8" >
                                <option value="汉族">汉族</option>
                                <option value="回族">回族</option>
                                <option value="蒙古族">蒙古族</option>
                                <option value="藏族">藏族</option>
                                <option value="维吾尔族">维吾尔族</option>
                                <option value="哈萨克族">哈萨克族</option>
                                <option value="高山族">高山族</option>
                                <option value="拉祜族">拉祜族</option>
                                <option value="黎族">黎族</option>
                                <option value="土家族">土家族</option>
                                <option value="乌孜别克族">乌孜别克族</option>
                                <option value="满族">满族</option>
                                <option value="傈僳族">傈僳族</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>邮箱：</td>
                        <td>
                            <input type="text" class="" name="userEmail" placeholder="电子邮箱">
                        </td>
                        <td>联系方式：</td>
                        <td>
                            <input type="text" class="" name="userPhone" id="userPhone" placeholder="注册时使用的11位手机号码">
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td>
                            <input type="date" class="" name="userBirthday" placeholder="年/月/日">
                        </td>


                    </tr>
                </table>
            </div>
                <div align="center" class="col">
                    <button class="btn btn-info  align-content-center text-center
                       " type="button" id="btnchange">保存修改</button>
                </div>

            </form>
        </div>


    </div>
</div>

<!--页脚-->
<div class="footer bg-info fixed-bottom text-center">
    <p class="text-white">版权所有© Copyright 1999-2021 爱思软件股份有限公司　　中国·青岛黄岛区嘉陵江路777号 西区公寓2号   版本V-0.0.1</p>
</div>

</body>

<!--给按钮添加点击事件 -->
<script src="jquery/jquery-3.6.0.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#btnchange").click(function () {
            let form=jQuery("#form").serialize();<!-- 获取表单的数据-->

                jQuery.post("user/change",form,function (rst) {
                    if(rst>=1){
                        alert(rst);
                        let trs='修改成功';
                        alert(trs);
                    }
                    else {alert('修改失败');}
            })
        })
    })
</script>

</html>

<!-- localhost:8088/edusys/userInformation.html-->